import React from 'react';
import { observer } from 'mobx-react';
import { WeaNewScroll } from "ecCom";
import jQuery from "jquery";

export interface RightLeftLayoutProps {
    leftCom: any;
    rightCom: any;
    bottomHeight?: Number;
    visible?: boolean;
    padding?: any;
    iconClass?: any;//图标class
    titletext?: any;//文字
    canDrag?: boolean;
    iconParentStyle?: any;
    rightLayoutWidth?: any;
    showOrCloseExpand?: any;

}

@observer
export default class RightLeftLayout extends React.Component<RightLeftLayoutProps, any> {
    totalWidth;
    defaultRightWidth = '35%';
    constructor(props) {
        super(props);
        this.state = {
            rightWidth: 0,
            width: props.rightLayoutWidth ? props.rightLayoutWidth : '35%'//右边宽度
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({ width: nextProps.rightLayoutWidth ? nextProps.rightLayoutWidth : '35%' });
    }

    componentDidMount() {
        const { visible } = this.props;
        if (visible) {
            this.changeChartsShow();
        }
        jQuery(window).resize(() => {
            this.totalWidth = jQuery('.cube-rightleft-layout-warper').width();
            let width = this.state.width;
            if (width.endsWith('px')) {
                width = width.replace('px', '') / this.totalWidth;
                this.setState({ width: Math.round(width * 100) + '%' });
            }
        })
    }

    componentDidUpdate() {
        if (this.state.width.endsWith('%')) {
            this.totalWidth = jQuery('#cube_rightContainer').width() / (parseInt(this.state.width.replace('%', '')) / 100);
        } else {
            this.totalWidth = jQuery('.cube-rightleft-layout-warper').width();
        }
    }

    changeChartsShow = () => {
        if (this.props.showOrCloseExpand) {
            this.props.showOrCloseExpand();
            return;
        }
        const rightDiv = jQuery(".cube-rightleft-layout-right");
        const leftDiv = jQuery(".cube-rightleft-layout-left");
        let chartsWidth = 0;
        let searchWidth = 100;
        const width = parseInt(this.defaultRightWidth.replace('%', ''));
        if (rightDiv.hasClass("cube-rightleft-hide")) {
            rightDiv.removeClass("cube-rightleft-hide");
            chartsWidth = width;
            searchWidth = 100 - width;
        } else {
            rightDiv.addClass("cube-rightleft-hide");
        }
        this.setState({ rightWidth: chartsWidth })
        rightDiv.css("width", chartsWidth + "%");
        leftDiv.css("width", searchWidth + "%");
    }

    getOtherWidth = () => {
        let width = this.state.width;
        if (width.endsWith('%')) {
            return (100 - parseInt(width.replace('%', ''))) + '%';
        } else if (width.endsWith('px')) {
            this.totalWidth = jQuery('.cube-rightleft-layout-warper').width();
            return (this.totalWidth - parseInt(width.replace('px', ''))) + 'px';
        }
    }

    isMoveing = false;
    startX;
    onStart = (e) => {
        jQuery('.wea-draggable-defaultCss').css('width', '400px');
        jQuery('.wea-draggable-defaultCss').css('left', '-200px');
        if (this.state.width && this.state.width.startsWith('0')) {
            return;
        }
        this.isMoveing = true;
        this.startX = e.screenX;
    }

    onDrag = (e) => {
        if (this.isMoveing) {
            let width = jQuery('#cube_rightContainer').width() + this.startX - e.screenX;
            if (width < 10 || width > this.totalWidth - 10) {
                return;
            }
            if (Math.abs(this.startX - e.screenX) < 4) return;
            this.setState({ width: width + 'px' });
            this.startX = e.screenX;
        }
    }


    onStop = () => {
        this.isMoveing = false;
        jQuery('.wea-draggable-defaultCss').css('width', '10px');
        jQuery('.wea-draggable-defaultCss').css('left', '-5px');
    }

    render() {
        const { leftCom, rightCom, bottomHeight, padding, iconClass, titletext, visible, canDrag, iconParentStyle } = this.props;
        const defaultShowReplyPanel = !visible;
        const isshow: boolean = defaultShowReplyPanel || (this.state.rightWidth > 0);
        let dragStyle: any = {};
        let rightClosed=false;
        if (iconParentStyle) {//如果存在iconParentStyle说明是来自查询的右侧展开，否则可能是回复评论右侧框
            if (this.state.width && this.state.width.startsWith('0')) {
                iconParentStyle['background'] = 'url(/spa/portal/images/synergy/left.png) center center no-repeat';
                iconParentStyle['left'] = '-17px';
                dragStyle = {width:'0px'};
                rightClosed=true;
            } else {
                iconParentStyle['background'] = 'url(/spa/portal/images/synergy/right.png) center center no-repeat';
                iconParentStyle['left'] = '0px';
                dragStyle = { cursor: 'e-resize' };
                rightClosed=false;
            }
        }
        return (
            <div className="cube-rightleft-layout-warper"
                style={{
                    boxSizing: "border-box",   //回复评论在右侧的时候，页面边距这里处理---2
                    padding: padding ? `${padding.top + "px " + padding.right + "px " + padding.bottom + "px " + padding.left + "px"}` : ""
                }}>
                <div className="cube-rightleft-layout-inner" style={{ minHeight: bottomHeight + "px" }}>
                    <div className="cube-rightleft-layout-left" style={{ "width": this.getOtherWidth() }}>
                        {bottomHeight?<WeaNewScroll height={bottomHeight}>
                            {leftCom}
                        </WeaNewScroll>:leftCom}
                    </div>
                    <div className={"cube-rightleft-layout-right"} style={{ "width": this.state.width }}>
                        <div onClick={this.changeChartsShow} style={iconParentStyle} className="cube-rightleft-layout-expand">
                            {iconClass && iconClass != "" && !iconParentStyle && <div className={`cube-rightleft-icon ` + iconClass}></div>}
                            {titletext && titletext != "" && <div className="cube-rightleft-title">{titletext}</div>}
                        </div>
                        {canDrag &&
                            <div className="wea-draggable-defaultCss"
                                onMouseDown={this.onStart}
                                onMouseUp={this.onStop}
                                onMouseMove={this.onDrag}
                                style={{ height: '100%', width: '10px', position: 'absolute', zIndex: 100, left: '-5px', ...dragStyle }}></div>
                        }
                        {
                            isshow &&(bottomHeight?<WeaNewScroll height={bottomHeight}>
                                <div id="cube_rightContainer" style={rightClosed?{display:'none'}:{display:'block'}}>{rightCom}</div>
                            </WeaNewScroll>:<div id="cube_rightContainer"  style={rightClosed?{display:'none'}:{display:'block'}}>{rightCom}</div>)
                        }
                    </div>
                </div>
            </div>
        )
    }
}
